import React from 'react'
import { Card, Button,Modal} from 'antd'
import { Editor } from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import draftjs from 'draftjs-to-html';
export default class RichText extends React.Component{
    componentWillMount() {
    } 
  state = {
    showRichText:false,
    editorState:""
  }
  onEditorStateChange = (editorState) => {
    this.setState({
        editorState,
    })
  }
  handleClickContent = () => {
    this.setState({
        editorState:"",
    })
  }
  handleGetText = () => {
    this.setState({
        showRichText:true
    })
  }
  onEditChange = (contentState) => {
    this.setState({
        contentState
    })
  }
    render() {
        const { editorState} =  this.state;
        return (
            <div>
                <Card>
                    <Button onClick={this.handleClickContent} type='primary' style={{marginRight:10}}>清空内容</Button>
                    <Button onClick={this.handleGetText} type='primary'>获取HTML文本</Button>
                </Card>
                <Card title="富文本编辑器">
                <Editor
                    editorState={editorState}
                    onContentStateChange={this.onEditChange}
                     onEditorStateChange={this.onEditorStateChange}
                        />
                </Card>
                <Modal
                title="富文本"
                visible={this.state.showRichText}
                onCancel={() => {
                    this.setState({
                        showRichText:false
                    })
                }}
                >
                    {draftjs(this.state.contentState)}
                </Modal>
            </div> 

        )
    }
}
